<template>
  <div class="user">
    <div class="searchuser">
      <el-input
        v-model="adminNo"
        placeholder="用户编号"
        size="normal"
        clearable
      ></el-input>
      <el-input
        v-model="adminAccountNumber"
        placeholder="用户名"
        size="normal"
        clearable
      ></el-input>
      <el-input
        v-model="adminName"
        placeholder="用户姓名"
        size=""
        clearable
      ></el-input>
      <el-input
        v-model="adminPower"
        placeholder="用户权限"
        size=""
        clearable
      ></el-input>
      <el-button type="primary" size="default" @click="search">搜索</el-button>

      <el-button type="primary" size="default" @click="addUser">新增</el-button>
      <el-button size="default" @click="recycleUser">回收站</el-button>
    </div>
    <div class="userbody">
      <el-table height="430px" :data="tabledata" border stripe>
        <el-table-column
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="
                handleEdit(scope.$index, userlibrary, pageSize, currentPage)
              "
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click.native.prevent="
                handleDelete(scope.$index, userlibrary, pageSize, currentPage)
              "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pageStyle">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :page-sizes="[1, 5, 10, 20]"
          layout="total,prev, pager, next, jumper"
          :total="userlibrary.length"
          :page-count="userlibrary.length / pageSize"
          hide-on-single-page
        >
        </el-pagination>
      </div>
    </div>
    <div class="detaildiv">
      <!-- 新增 -->
      <el-dialog title="用户添加" :visible.sync="addVisible">
        <div class="dialogform">
          <!-- {{libraryitem}} -->
          <el-form
            :model="addform"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="用户账号">
              <el-input v-model="addform.adminAccountNumber"></el-input>
            </el-form-item>
            <el-form-item label="用户姓名">
              <el-input v-model="addform.adminName"></el-input>
            </el-form-item>
            <el-form-item label="用户权限">
              <el-select v-model="addform.adminPower" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户密码">
              <el-input v-model="adminPassword"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>

          <el-button type="primary" @click="addUp">新增</el-button>
        </span>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="用户更改" :visible.sync="editVisible">
        <div class="dialogform">
          <!-- {{libraryitem}} -->
          <el-form
            :model="editform"
            ref="form"
            label-width="80px"
            :inline="false"
            size="normal"
          >
            <el-form-item label="用户姓名">
              <el-input v-model="editform.adminName"></el-input>
            </el-form-item>
            <el-form-item label="用户权限">
              <el-select v-model="editform.adminPower" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>

          <el-button type="primary" @click="editUp">确认</el-button>
        </span>
      </el-dialog>

      <!-- ---------------------------------------------------------- -->
      <!-- 回收站 -->
      <el-dialog
        @closed="getUser"
        fullscreen
        title="用户信息回收"
        :visible.sync="recyleVisable"
        width="30%"
      >
        <span>
          <!-- <div class="searchuser">
            <el-input
              v-model="adminNo"
              placeholder="用户编号"
              size="normal"
              clearable
            ></el-input>
            <el-input
              v-model="adminAccountNumber"
              placeholder="用户名"
              size="normal"
              clearable
            ></el-input>
            <el-input
              v-model="adminName"
              placeholder="用户姓名"
              size=""
              clearable
            ></el-input>
            <el-input
              v-model="adminPower"
              placeholder="用户权限"
              size=""
              clearable
            ></el-input>
            <el-button type="primary" size="default" @click="search"
              >搜索</el-button
            >

            <el-button type="primary" size="default" @click="addUser">新增</el-button>
      <el-button size="default" @click="recycleUser">回收站</el-button>
          </div> -->
          <div class="userbody">
            <el-table height="430px" :data="tabledata" border stripe>
              <el-table-column
                v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                :width="col.width"
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="success"
                    @click="
                      handleBack(
                        scope.$index,
                        userlibrary,
                        pageSize,
                        currentPage
                      )
                    "
                    >恢复</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="
                      handleDelForever(
                        scope.$index,
                        userlibrary,
                        pageSize,
                        currentPage
                      )
                    "
                    >永久删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="pageStyle">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :page-sizes="[1, 5, 10, 20]"
                layout="total,prev, pager, next, jumper"
                :total="userlibrary.length"
                :page-count="userlibrary.length / pageSize"
                hide-on-single-page
              >
              </el-pagination>
            </div>
          </div>
        </span>
        <!-- <span slot="footer">
          <el-button @click=" = false">Cancel</el-button>
          <el-button type="primary" @click="">OK</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  data() {
    return {
      adminNo: null,
      adminAccountNumber: null,
      adminName: null,
      adminPower: null,
      adminPassword: "",
      pageSize: 7,
      currentPage: 1,
      addform: {
        adminAccountNumber: null,
        adminName: null,
        adminPower: null,
        adminPassword: null,
      },
      editform: {
        adminName: "",
        adminPower: "",
      },
      columns: [
        { label: "用户编号", id: "adminNo" },
        { label: "用户账号", id: "adminAccountNumber" },
        { label: "用户姓名", id: "adminName" },
        { label: "用户权限", id: "adminPowerDesc" },
        { label: "用户状态", id: "adminStateDesc" },
      ],
      userlibrary: [],
      addVisible: false,
      editVisible: false,
      recyleVisable: false,
      rules: [],
      options: [
        {
          label: "管理员",
          value: 1,
        },
        {
          label: "系统管理员",
          value: 0,
        },
        {
          label: "领导",
          value: 2,
        },
      ],
      item: {},
      statusMsg: "",
    };
  },
  computed: {
    tabledata: function () {
      return this.userlibrary.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    searchDesc: function () {
      return (
        this.adminNo +
        this.adminAccountNumber +
        this.adminName +
        this.adminPower
      );
    },
  },
  methods: {
    // tabledata() {
    //   if (this.statusMsg=='成功') {
    //         return this.userlibrary.slice(
    //     (this.currentPage - 1) * this.pageSize,
    //     this.currentPage * this.pageSize
    //   );
    //   }else{
    //     return undefined
    //   }

    // },
    watchSearch() {
      if (this.searchDesc == "nullnullnullnull" ) {
        this.getUser();
      }
    },
    adminPowerDesc() {
      switch (this.adminPower) {
        case "管理员":
          return 1;
        case "系统管理员":
          return 0;
        case "领导":
          return 2;

        default:
          console.log("输错了");
          break;
      }
    },
    async getUser() {
      await this.$http
        // .get("/data/tb_user.json")
        .get("/admin/queryList")
        .then((result) => {
          //  console.log(result.data.data.data);
          if (result.data.data == null) {
            this.userlibrary = [];
          } else {
            this.userlibrary = result.data.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getDiary() {},
    init() {
      switch (this.$route.params.value) {
        case "user-management":
          this.getUser();
          break;

        default:
          console.log(1);
          break;
      }
    },
    search() {
      this.$http
        .get("/admin/queryList", {
          params: {
            adminNo: this.adminNo,
            adminAccountNumber: this.adminAccountNumber,
            adminName: this.adminName,
            adminPower: this.adminPowerDesc(),
          },
        })
        .then((result) => {
          console.log(result);
          this.statusMsg = result.data.msg;
          if (result.data.msg == "成功") {
            this.userlibrary = result.data.data.data;
            this.adminNo = null;
            this.adminAccountNumber = null;
            this.adminName = null;
            this.adminPower = null;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 打开添加用户窗口
    addUser() {
      this.addVisible = true;
    },
    // 新用户数据上传
    async addUp() {

      await
       this.$http
        .get("/admin/getRegisterRsa").then((result) => {
          this.addform.adminPassword=this.$encryptionData(
            result.data,
            this.adminPassword
          );

          this.$http
        .post("/admin/adminAdd", this.addform)
        .then(() => {
          // console.log(result);
          this.getUser();
          this.addVisible = false;
          this.$message({
            type: "success",
            message: "添加成功!",
          });
          for (let key in this.addform) {
            this.addform[key] = null;
          }
        })
        .catch(() => {
          this.$message({
            type: "danger",
            message: "网络波动请稍后再试!",
          });
        });
        }).catch((err) => {
          console.log(err);
        });
      
    },
    delUser() {},
    //  页面更换
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleEdit(i, l, p, c) {
      console.log(l[p * (c - 1) + i]);
      this.item = l[p * (c - 1) + i];
      this.editVisible = true;
      Object.keys(this.editform).forEach((key) => {
        this.editform[key] = this.item[key] || this.editform[key];
      });
    },
    // 编辑提交
    editUp() {
      this.$http
        .post(
          "/admin/adminUpdate",
          Qs.stringify({
            adminNo: this.item.adminNo,
            adminName: this.editform.adminName,
            adminPower: this.editform.adminPower,
          })
        )
        .then((result) => {
          console.log(result);
          this.getUser();
          this.editVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除文件
    handleDelete(i, l, p, c) {
      // console.log(i+l+p+c);
      // console.log(l[i]);
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 注意：此处应改成行隐藏和状态码转换
          // console.log(l[i].adminNo);
          this.$http
            .post(
              "/admin/delete",
              Qs.stringify({ adminNo: l[p * (c - 1) + i].adminNo })
            )
            .then(() => {
              this.getUser();

              // l.splice(p * (c - 1) + i, 1);

              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            });

          //   this.init()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 回收站
    recycleUser() {
      this.$http
        .get("/admin/listDelete")
        .then((result) => {
          console.log(result);
          if (result.data.data == null) {
            this.userlibrary = [];
          } else {
            this.userlibrary = result.data.data.data;
          }
          this.recyleVisable = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 恢复
    handleBack(i, l, p, c) {
      this.$confirm("此操作将恢复该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 注意：此处应改成行隐藏和状态码转换
          // console.log(l[i].adminNo);
          this.$http
            .post(
              "/admin/reduction",
              Qs.stringify({ adminNo: l[p * (c - 1) + i].adminNo })
            )
            .then(() => {
              this.recycleUser();

              // l.splice(p * (c - 1) + i, 1);

              this.$message({
                type: "success",
                message: "恢复成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            });

          //   this.init()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 永久删除用户
    handleDelForever(i, l, p, c) {
      this.$confirm("!!! 此操作将永久删除用户, 是否继续? !!!", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          // 注意：此处应改成行隐藏和状态码转换
          // console.log(l[i].adminNo);
          this.$http
            .post(
              "/admin/cleanAdmin",
              Qs.stringify({ adminNo: l[p * (c - 1) + i].adminNo })
            )
            .then(() => {
              this.recycleUser();

              // l.splice(p * (c - 1) + i, 1);

              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            });

          //   this.init()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  watch: {
    $route: "init",
    // searchDesc: "watchSearch",
  },
  created() {
    this.init();
  },
};
</script>

<style >
.searchuser {
  display: flex;
  height: 60px;
  border-bottom: solid 1px #9d9d9d;
  justify-content: flex-start;
}
.searchuser .el-input {
  padding: 10px;
  width: 200px;
}
.searchuser .el-input .el-input__inner {
  height: 35px;
}
.searchuser .el-button {
  padding: 0px;
  font-size: 15px;
  height: 34px;
  width: 100px;
  margin-top: 11px;
  margin-left: 15px;
  line-height: 34px;
}
.userbody {
  padding: 10px;
}
.control {
  margin: 5px 0px 10px 4px;
}
.pageStyle {
  text-align: center;
}
.pageStyle .el-pagination {
  padding: 0px;
}
</style>